<template>
	<view class="ai-chat-container flex fd-c">
		<!-- 顶部导航栏 -->
		<topBar :back="false" :isPerson="false">
			<template #left style="width: 100%;">
				<view class="flex ai-c">
					<image src="/static/lianggehengxian.png" mode="aspectFit"
						style="width: 48rpx;height: 48rpx;margin-right: 48rpx;" @click="showMenu"></image>
					<image src="/static/jiahaoya.png" mode="aspectFit"
						style="width: 48rpx;height: 48rpx;margin-right: 48rpx;" @click="newChat"></image>
				</view>
			</template>
		</topBar>

		<!-- 聊天消息区域 -->
		<scroll-view class="scrollable-content chat-messages" scroll-y :scroll-top="scrollTop"
			:scroll-with-animation="true" @scrolltoupper="loadMoreMessages">
			<view class="messages-container">
				<!-- 消息列表 -->
				<view v-for="(message, index) in messages" :key="index" class="message-item" :class="message.type">
					<!-- 用户消息 -->
					<view v-if="message.type === 'user'" class="user-message">
						<view class="message-bubble user-bubble" @longpress="showMessageMenu(message, index)">
							<text class="message-text" selectable>{{ message.content }}</text>
						</view>
					</view>

					<!-- AI回复 -->
					<view v-else class="ai-message">
						<view class="ai-content">
							<view class="message-bubble ai-bubble" @longpress="showMessageMenu(message, index)">
								<text class="message-text" selectable>{{message.content}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="isLoading" class="loading-message">
					<view class="ai-content">
						<view class="message-bubble ai-bubble loading-bubble">
							<view class="typing-indicator">
								<view class="dot"></view>
								<view class="dot"></view>
								<view class="dot"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="chat-input-container" :style="{ bottom: keyboardHeight + 'px', transform: keyboardHeight > 0 ? 'translateY(0)' : 'none' }">
			<view class="input-wrapper">
				<input class="message-input" type="text" placeholder="我可以帮解答~" v-model="inputMessage"
					@confirm="sendMessage" :disabled="isLoading" 
					adjust-position="true" 
					cursor-spacing="20"
					@focus="handleInputFocus"
					@blur="handleInputBlur" />
				<view class="send-button" :class="{ 'active': inputMessage.trim() }" @click="sendMessage">
					<uni-icons type="arrow-up" size="16" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<aiHistory ref="aiHistoryRef" />
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import topBar from '@/components/topBar.vue'
import aiHistory from '@/components/aiHistory.vue'
import api from '@/api/index.js'
import axios from 'axios';
import { CONFIG, validateApiKey, setDeepSeekApiKey, getDeepSeekApiKey } from '@/utils/config'
// 响应式数据
const currentTime = ref('09:00')
const inputMessage = ref('')
const isLoading = ref(false)
const scrollTop = ref(0)
const aiHistoryRef = ref(null)
const keyboardHeight = ref(0)
const messages = ref([
	{
		type: 'user',
		content: '为什么会有这个世界',
		timestamp: new Date(Date.now() - 60000)
	},
	{
		type: 'ai',
		content: '"为什么会有这个世界？"是一个终极、深刻而神秘的哲学、宗教和科学问题。千百年来，思想家、科学家和宗教领袖都试图回答它，但至今没有普遍接受的答案。不同的视角提供了不同的理解。\n\n**1. 科学视角：物理世界的起源与演化**\n\n**宇宙起源（大爆炸理论）**\n现代科学认为，我们可观测的宇宙起源于大约138亿年前的大爆炸。从一个极热、极密的初始状态（奇点）开始，宇宙开始膨胀和冷却。\n\n**"为什么"有初始状态？**\n科学（特别是物理学和宇宙学）主要描述的是*如何*（How）从那个初始状态演化出我们今天看到的复杂宇宙（星系、恒星、行星、生命）。它描述了支配宇宙的规律（如物理定律）。\n\n**"为什么"存在规律和物质？**\n科学目前无法解释为什么那个初始状态会存在，为什么物理定律会存在，为什么是*这些特定的*定律而不是其他，或者为什么"有东西"存在而不是"什么都没有"。这些问题触及了科学的边界，进入了哲学甚至神学的领域。\n\n**可能的科学假说**\n一些理论（如量子涨落、多元宇宙理论）试图解释，我们宇宙的起源可能是在更大背景下的随机或必然事件。但这些假说本身也需要解释其背景的起源，仍然无法彻底回答"为什么"这个世界会存在。',
		timestamp: new Date()
	}
])

// 更新时间
const updateTime = () => {
	const now = new Date()
	currentTime.value = now.getHours().toString().padStart(2, '0') + ':' + 
						now.getMinutes().toString().padStart(2, '0')
}

// 格式化时间
const formatTime = (timestamp) => {
	const now = new Date()
	const diff = now - timestamp
	
	if (diff < 60000) { // 1分钟内
		return '刚刚'
	} else if (diff < 3600000) { // 1小时内
		return Math.floor(diff / 60000) + '分钟前'
	} else if (diff < 86400000) { // 24小时内
		return timestamp.getHours().toString().padStart(2, '0') + ':' + 
			   timestamp.getMinutes().toString().padStart(2, '0')
	} else {
		return (timestamp.getMonth() + 1) + '/' + timestamp.getDate()
	}
}

// 发送消息
// const sendMessage1 = async () => {
// 	if (!inputMessage.value.trim() || isLoading.value) return
	
// 	const userMessage = {
// 		type: 'user',
// 		content: inputMessage.value.trim(),
// 		timestamp: new Date()
// 	}
	
// 	messages.value.push(userMessage)
// 	const messageContent = inputMessage.value.trim()
// 	inputMessage.value = ''
	
// 	// 等待用户消息渲染完成并滚动到底部
// 	await nextTick()
// 	setTimeout(() => {
// 		scrollToBottom()
// 	}, 150)
	
// 	// 显示加载状态
// 	isLoading.value = true
	
// 	// 等待加载状态渲染完成并滚动到底部
// 	await nextTick()
// 	setTimeout(() => {
// 		scrollToBottom()
// 	}, 150)
	
// 	// try {
// 	// 	// 模拟AI回复
// 	// 	await new Promise(resolve => setTimeout(resolve, 2000))
		
// 	// 	const aiResponse = await getAIResponse(messageContent)
		
// 	// 	messages.value.push({
// 	// 		type: 'ai',
// 	// 		content: aiResponse,
// 	// 		timestamp: new Date()
// 	// 	})
		
// 	// 	// 保存对话到历史记录
// 	// 	saveChatToHistory(messageContent)
		
// 	// } catch (error) {
// 	// 	console.error('获取AI回复失败:', error)
// 	// 	messages.value.push({
// 	// 		type: 'ai',
// 	// 		content: '抱歉，我现在无法回答您的问题，请稍后再试。',
// 	// 		timestamp: new Date()
// 	// 	})
// 	// } finally {
// 	// 	isLoading.value = false
// 	// }
// }
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return;

  const userMessage = {
    type: 'user',
    content: inputMessage.value.trim(),
    timestamp: new Date()
  };

  messages.value.push(userMessage);
  const messageContent = inputMessage.value.trim();
  inputMessage.value = '';

  // 等待用户消息渲染完成并滚动到底部
  await nextTick();
  setTimeout(() => {
    scrollToBottom();
  }, 150);

  // 显示加载状态
  isLoading.value = true;

  // 等待加载状态渲染完成并滚动到底部
  await nextTick();
  setTimeout(() => {
    scrollToBottom();
  }, 150);

  try {
    // 调用 DeepSeek API 获取 AI 回复
    const aiResponse = await getAIResponse(messageContent);

    // 添加 AI 回复到消息列表
    messages.value.push({
      type: 'ai',
      content: aiResponse,
      timestamp: new Date()
    });

    // 保存对话到历史记录
    saveChatToHistory(messageContent);

  } catch (error) {
    console.error('获取AI回复失败:', error);
    messages.value.push({
      type: 'ai',
      content: '抱歉，我现在无法回答您的问题，请稍后再试。',
      timestamp: new Date()
    });
  } finally {
    // 隐藏加载状态
    isLoading.value = false;
  }
};

// 发送请求获取 AI 回复
const getAIResponse = async (messageContent) => {
  const apiKey = 'sk-b72b03000548406382ddde90b83fabd0';  // 替换为真实的 API 密钥
  const params = {
    model: "deepseek-chat",
    messages: [
      { role: "user", content: messageContent },
    ],
    max_tokens: 2000,
    temperature: 0.7
  };

  try {
    // 使用 uni.request 替代 axios
    const response = await new Promise((resolve, reject) => {
      uni.request({	  
        url: 'https://api.deepseek.com/chat/completions', // API URL
        method: 'POST',
        data: params,
        header: {
          'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.statusCode === 200) {
            resolve(res.data.choices[0].message.content);  // 处理成功响应
          } else {
            reject(new Error('请求失败，状态码：' + res.statusCode));
          }
        },
        fail: (error) => {
          reject(error);  // 请求失败处理
        }
      });
    });

    return response;

  } catch (error) {
    console.error('请求AI失败:', error);
    throw new Error('请求AI失败');
  }
};
// 获取AI回复 - 接入DeepSeek API
// const getAIResponse1 = async (userMessage) => {
// 	try {
// 		// 构建对话历史
// 		const conversationHistory = messages.value
// 			.filter(msg => msg.type === 'user' || msg.type === 'ai')
// 			.slice(-CONFIG.DEEPSEEK.MAX_HISTORY) // 使用配置中的最大历史条数
// 			.map(msg => ({
// 				role: msg.type === 'user' ? 'user' : 'assistant',
// 				content: msg.content
// 			}))

// 		// 添加当前用户消息
// 		conversationHistory.push({
// 			role: 'user',
// 			content: userMessage
// 		})

// 		// 调用DeepSeek API
// 		const response = await api.chatWithDeepSeek({
// 			model: CONFIG.DEEPSEEK.MODEL,
// 			messages: conversationHistory,
// 			temperature: CONFIG.DEEPSEEK.TEMPERATURE,
// 			max_tokens: CONFIG.DEEPSEEK.MAX_TOKENS,
// 			stream: false
// 		})
// 		console.log(response)
// 		// 返回AI回复内容
// 		if (response.choices && response.choices[0] && response.choices[0].message) {
// 			return response.choices[0].message.content
// 		} else {
// 			throw new Error('API响应格式错误')
// 		}
// 	} catch (error) {
// 		// 根据错误类型给出不同的提示
// 		let errorMessage = '抱歉，AI服务暂时不可用。'
		
// 		if (error.message.includes('API密钥') || error.message.includes('Authentication') || error.message.includes('invalid')) {
// 			errorMessage = 'API密钥无效或未设置。请点击右上角设置按钮配置正确的API密钥。'
// 		} else if (error.message.includes('网络')) {
// 			errorMessage = '网络连接失败，请检查网络后重试。'
// 		} else if (error.message.includes('超时')) {
// 			errorMessage = '请求超时，请稍后重试。'
// 		}
		
// 		// 如果API调用失败，回退到本地模拟回复
// 		const fallbackResponses = {
// 			'你好': '您好！我是您的AI助手，很高兴为您服务。有什么我可以帮助您的吗？',
// 			'什么是AI': 'AI（人工智能）是指让机器模拟人类智能行为的技术。它可以进行学习、推理、感知和决策，帮助人类解决各种问题。',
// 			'谢谢': '不客气！很高兴能帮助到您。还有其他问题吗？',
// 			'时间': `现在是${new Date().toLocaleString('zh-CN')}。`,
// 			'帮助': '我可以帮您解答各种问题，包括：\n• 哲学思考\n• 科学知识\n• 生活建议\n• 学习辅导\n\n请直接提问，我会尽力为您解答！'
// 		}
		
// 		// 简单的关键词匹配
// 		for (const [key, response] of Object.entries(fallbackResponses)) {
// 			if (userMessage.includes(key)) {
// 				return response
// 			}
// 		}
		
// 		return errorMessage + '需要申请ai接口'
// 	}
// }

// 滚动到底部
const scrollToBottom = () => {
	nextTick(() => {
		// 使用一个很大的数值确保滚动到底部
		scrollTop.value = 999999
		// 再次确保滚动，使用不同的值触发滚动
		setTimeout(() => {
			scrollTop.value = 999999 + 1
		}, 50)
	})
}

// 加载更多消息
const loadMoreMessages = () => {
	// 可以在这里实现加载历史消息的逻辑
	console.log('加载更多消息')
}

// 保存对话到历史记录
const saveChatToHistory = (firstMessage) => {
	if (!firstMessage || messages.value.length < 2) return
	
	// 使用第一条用户消息作为标题
	const chatTitle = firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
	
	// 保存到AI历史组件
	aiHistoryRef.value?.saveCurrentChat(chatTitle, messages.value)
}

// 菜单操作
const showMenu = () => {
	aiHistoryRef.value?.openAiHistory()
}

const newChat = () => {
	// 如果当前有对话，先保存
	if (messages.value.length > 0) {
		const firstUserMessage = messages.value.find(msg => msg.type === 'user')
		if (firstUserMessage) {
			saveChatToHistory(firstUserMessage.content)
		}
	}
	
	// 清空当前对话
	messages.value = []
	inputMessage.value = ''
	
	uni.showToast({
		title: '新建对话成功',
		icon: 'success'
	})
}

const showMore = () => {
	uni.showActionSheet({
		itemList: ['分享对话', '导出对话', '清空对话'],
		success: (res) => {
			console.log('选择了：', res.tapIndex)
		}
	})
}

const showProfile = () => {
	uni.navigateTo({
		url: '/pages/index/personal-center'
	})
}

// 显示消息菜单
const showMessageMenu = (message, index) => {
	const actions = ['复制', '删除']
	if (message.type === 'ai') {
		actions.push('重新生成')
	}
	
	uni.showActionSheet({
		itemList: actions,
		success: (res) => {
			const action = actions[res.tapIndex]
			switch (action) {
				case '复制':
					copyMessage(message.content)
					break
				case '删除':
					deleteMessage(index)
					break
				case '重新生成':
					regenerateMessage(index)
					break
			}
		}
	})
}

// 复制消息
const copyMessage = (content) => {
	uni.setClipboardData({
		data: content,
		success: () => {
			uni.showToast({
				title: '已复制到剪贴板',
				icon: 'success',
				duration: 1500
			})
		}
	})
}

// 删除消息
const deleteMessage = (index) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这条消息吗？',
		success: (res) => {
			if (res.confirm) {
				messages.value.splice(index, 1)
				uni.showToast({
					title: '消息已删除',
					icon: 'success',
					duration: 1500
				})
			}
		}
	})
}

// 重新生成AI回复
const regenerateMessage = async (index) => {
	if (index === 0) return
	
	// 找到对应的用户消息
	const userMessageIndex = index - 1
	if (userMessageIndex < 0 || messages.value[userMessageIndex].type !== 'user') return
	
	const userMessage = messages.value[userMessageIndex].content
	
	// 删除当前AI回复
	messages.value.splice(index, 1)
	
	// 等待删除操作渲染完成并滚动到底部
	await nextTick()
	setTimeout(() => {
		scrollToBottom()
	}, 150)
	
	// 显示加载状态
	isLoading.value = true
	
	// 等待加载状态渲染完成并滚动到底部
	await nextTick()
	setTimeout(() => {
		scrollToBottom()
	}, 150)
	
	try {
		// 模拟重新生成
		await new Promise(resolve => setTimeout(resolve, 2000))
		
		const newResponse = await getAIResponse(userMessage)
		
		messages.value.splice(index, 0, {
			type: 'ai',
			content: newResponse,
			timestamp: new Date()
		})
		
	} catch (error) {
		console.error('重新生成失败:', error)
		uni.showToast({
			title: '重新生成失败',
			icon: 'error',
			duration: 1500
		})
	} finally {
		isLoading.value = false
	}
}

// 监听消息变化，自动滚动到底部
watch(messages, () => {
	nextTick(() => {
		setTimeout(() => {
			scrollToBottom()
		}, 100)
	})
}, { deep: true })

// 监听加载状态变化，也要滚动到底部
watch(isLoading, (newVal) => {
	if (newVal) {
		nextTick(() => {
			setTimeout(() => {
				scrollToBottom()
			}, 100)
		})
	}
})

// 处理输入框聚焦
const handleInputFocus = (e) => {
	// 延迟滚动到底部，确保输入框可见
	setTimeout(() => {
		scrollToBottom()
	}, 300)
}

// 处理输入框失焦
const handleInputBlur = () => {
	// 键盘收起时，延迟重置高度，避免闪烁
	setTimeout(() => {
		keyboardHeight.value = 0
	}, 100)
}

// 生命周期
onMounted(() => {
	updateTime()
	// 每分钟更新时间
	setInterval(updateTime, 60000)
	
	// 初始滚动到底部
	nextTick(() => {
		scrollToBottom()
	})
	
	// 监听键盘高度变化（如果平台支持）
	// #ifdef APP-PLUS
	uni.onKeyboardHeightChange((res) => {
		if (res.height > 0) {
			keyboardHeight.value = res.height
			// 键盘弹出时，延迟滚动到底部
			setTimeout(() => {
				scrollToBottom()
			}, 300)
		} else {
			keyboardHeight.value = 0
		}
	})
	// #endif
	
	// #ifdef H5
	// H5 平台可能需要特殊处理
	// 由于 H5 键盘处理方式不同，adjust-position 属性会自动处理
	// #endif
})
</script>

<style lang="scss" scoped>
.ai-chat-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f7f7f7;
}

.chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	position: relative;
	z-index: 10;
	
	.header-left {
		.time {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.header-right {
		display: flex;
		gap: 32rpx;
		
		uni-icons {
			cursor: pointer;
			transition: opacity 0.2s;
			
			&:active {
				opacity: 0.6;
			}
		}
	}
}

.chat-messages {
	flex: 1;
	padding: 32rpx;
	padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}

.message-item {
	margin-bottom: 32rpx;
	animation: messageSlideIn 0.3s ease-out;
	
	&.user {
		display: flex;
		justify-content: flex-end;
	}
	
	&.ai {
		display: flex;
		justify-content: flex-start;
	}
}

@keyframes messageSlideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.user-message {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 70%;
	
	.message-bubble {
		background: linear-gradient(105deg, #FFE5E5 0%, #FFFDD5 100%), linear-gradient(105deg, #E5F7FF 0%, #E5E6FF 100%), #FFFFFF;
		border-radius: 40rpx 40rpx 0 40rpx;
		padding: 24rpx 32rpx;
		transition: all 0.2s ease;
		position: relative;
		
		&:active {
			transform: scale(0.98);
		}
		
		.message-text {
			color: #333;
			font-size: 28rpx;
			line-height: 44rpx;
			word-break: break-word;
		}
	}
	
	.message-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		padding-right: 16rpx;
	}
}

.ai-message {
	display: flex;
	align-items: flex-start;
	max-width: 100%;
	
	.ai-avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.ai-content {
		flex: 1;
		
		.message-bubble {
			// 左上角 #e5f7ff 渐变到右下颜色#e5e6ff
			background: linear-gradient(105deg, #E5F7FF 0%, #E5E6FF 100%);
			border-radius: 20rpx 20rpx 20rpx 0;
			padding: 24rpx 32rpx;
			transition: all 0.2s ease;
			position: relative;
			
			&:active {
				transform: scale(0.98);
			}
			
			.message-text {
				font-size: 28rpx;
				word-break: break-word;
			}
		}
		
		.message-time {
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
			padding-left: 16rpx;
		}
	}
}

.loading-message {
	display: flex;
	align-items: flex-start;
	
	.ai-avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.ai-content {
		.loading-bubble {
			background-color: #fff;
			border-radius: 24rpx 24rpx 24rpx 8rpx;
			padding: 24rpx 32rpx;
		}
	}
}

.typing-indicator {
	display: flex;
	gap: 8rpx;
	align-items: center;
	
	.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #ccc;
		border-radius: 50%;
		animation: typing 1.4s infinite ease-in-out;
		
		&:nth-child(1) {
			animation-delay: -0.32s;
		}
		
		&:nth-child(2) {
			animation-delay: -0.16s;
		}
	}
}

@keyframes typing {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.chat-input-container {
	padding: 32rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	padding-top: 0;
	position: fixed;
	left: 0;
	right: 0;
	background-color: #f7f7f7;
	z-index: 100;
	transition: bottom 0.3s ease;
}

.input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 48rpx;
	padding: 8rpx;
	background-color: #fff;
	
	.message-input {
		flex: 1;
		padding: 16rpx 24rpx;
		font-size: 32rpx;
		border: none;
		background: transparent;
		outline: none;
		
		&::placeholder {
			color: #999;
		}
	}
	
	.send-button {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #0F50DC;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		margin-right: 30rpx;
		cursor: pointer;
		
		&.active {
			background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
			transform: scale(1.05);
		}
		
		&:active {
			transform: scale(0.95);
		}
	}
}
</style> 